<template>
	<!-- 图层叠加 -->
	<view class="type_5">
		<!-- 单排模式 -->
		<template v-if="activeQuestion.extension.LayerResourceDisplayType==1">
			<view class="displayType_1">
				<view class="questionText" v-html="activeQuestion.questionText"></view>
				<view class="questionResourceAndLayersContainer"
					@click="previewImage(activeQuestion.questionResources[0].href)">
					<image :src="activeQuestion.questionResources[0].href" mode="aspectFit">
					</image>
					<image v-if="paperMode==1" v-for="layer of activeAnswer"
						:src="activeQuestion.layerResources[layer].href" mode="aspectFit"></image>
				</view>
				<view v-if="paperMode==1" class="tip">
					提示：以下是各个因素缩略图，请点击选择相关的图层
				</view>
				<Swiper v-if="paperMode==1" class="swiper" :layerResources="activeQuestion.layerResources"
					:greyIndexList="activeAnswer" @clickLayer="clickLayer"></Swiper>
			</view>
		</template>


		<!-- 两列模式 -->
		<template v-if="activeQuestion.extension.LayerResourceDisplayType==2">
			<view class="displayType_2">
				<Swiper v-if="paperMode==1" class="swiper" vertical
					:layerResources="activeQuestion.layerResources.filter(item=>item.index%2==0)"
					:greyIndexList="activeAnswer" @clickLayer="clickLayer"></Swiper>
				<view class="middle">
					<view class="questionText" v-html="activeQuestion.questionText"></view>
					<view class="questionResourceAndLayersContainer"
						@click="previewImage(activeQuestion.questionResources[0].href)">
						<image :src="activeQuestion.questionResources[0].href" mode="aspectFit">
						</image>
						<image v-if="paperMode==1" v-for="layer of activeAnswer"
							:src="activeQuestion.layerResources[layer].href" mode="aspectFit"></image>
					</view>
					<view v-if="paperMode==1" class="tip">
						提示：两侧是各个因素缩略图，请点击选择相关的图层
					</view>
				</view>
				<Swiper v-if="paperMode==1" class="swiper" vertical
					:layerResources="activeQuestion.layerResources.filter(item=>item.index%2==1)"
					:greyIndexList="activeAnswer" @clickLayer="clickLayer"></Swiper>
			</view>
		</template>

		<template v-if="paperMode==2 && activeRecord">
			<view class="recordCard">
				<view class="title">参考答案</view>
				<view class="answer">
					<template v-if="activeRecord.answer===null">无</template>
					<template v-else>
						<view style="display: flex;align-items: center;flex-wrap: wrap;">
							<image v-for="answer of activeRecord.answer"
								:src="activeQuestion.layerResources[answer].href" mode="aspectFit"
								style="width:8vw;height:8vw;margin-right: 2vw;"
								@click="previewImage(activeQuestion.layerResources[answer].href)"></image>
						</view>
					</template>
				</view>
				<view v-if="activeRecord.answerDetail" class="answerDetail">
					{{activeRecord.answerDetail}}
				</view>
			</view>
			<view class="recordCard">
				<view class="title">我的答案</view>
				<view class="userAnswer">
					<template v-if="activeRecord.userAnswer===null||activeRecord.userAnswer.length==0">无</template>
					<template v-else>
						<view style="display: flex;align-items: center;flex-wrap: wrap;">
							<image v-for="answer of activeRecord.userAnswer"
								:src="activeQuestion.layerResources[answer].href" mode="aspectFit"
								style="width:8vw;height:8vw;margin-right: 2vw;"
								@click="previewImage(activeQuestion.layerResources[answer].href)"></image>
						</view>
					</template>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import Swiper from "./Swiper.vue";
	export default {
		components: {
			Swiper
		},
		props: ["paperMode", "activeQuestion", "initAnswer", "activeRecord"],
		data() {
			return {
				activeAnswer: null
			}
		},
		created() {
			this.activeAnswer = this.initAnswer;
		},
		methods: {
			clickLayer(layerIndex) {
				console.log("layerIndex", layerIndex);
				layerIndex = String(layerIndex);//和多选题统一格式，采用字符串

				//未添加到答案
				if (this.activeAnswer.indexOf(layerIndex) == -1) {
					this.activeAnswer.push(layerIndex);
				}
				//已在答案列表中
				else {
					this.activeAnswer.splice(this.activeAnswer.findIndex(item => item == layerIndex), 1);
				}

				this.$emit("updateAnswer", this.activeAnswer);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "./record.scss";

	.type_5 {
		.displayType_1 {
			display: flex;
			flex-direction: column;
			align-items: center;

			.questionText {
				line-height: 2vw;
				white-space: pre-wrap;
			}

			.questionResourceAndLayersContainer {
				width: 40vw;
				height: 25vw;
				margin-top: 1vw;
				margin-bottom: 1vw;
				position: relative;

				image {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
			}

			.tip {
				background-color: #EFF4FF;
				border-radius: 5vw;
				color: #2380E9;
				padding: 1vw 2vw;
				margin-top: 1vw;
				font-size: 1.2vw;
			}

			.swiper {
				margin-top: 1vw;
			}


		}



		.displayType_2 {
			display: flex;
			align-items: flex-start;

			.middle {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				.questionText {
					line-height: 2vw;
					white-space: pre-wrap;
				}

				.questionResourceAndLayersContainer {
					width: 40vw;
					height: 25vw;
					margin-top: 1vw;
					margin-bottom: 1vw;
					position: relative;

					image {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
					}
				}

				.tip {
					background-color: #EFF4FF;
					border-radius: 5vw;
					color: #2380E9;
					padding: 1vw 2vw;
					margin-top: 1vw;
					font-size: 1.2vw;
				}
			}

			.swiper {
				margin: 2.5vw;
			}

		}
	}
</style>